<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" label-width="80px" :rules="rules" ref="ruleForm">
			<el-form-item label="上级菜单" v-if="mode=='add'">
				<el-input v-model="pName" :disabled="true"></el-input>
			</el-form-item>
			<el-form-item label="菜单标识" prop="type" style="margin-bottom: 0">
				<el-input v-model="form.type"></el-input>
				<span style="color:#F56C6C;font-size: 12px">菜单标识： system 表示系统路由，其他的标识属于插件路由。</span>
			</el-form-item>
			<el-form-item label="菜单名" prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="权限路由" prop="auth">
				<el-input v-model="form.auth" placeholder="例如: role/add"></el-input>
			</el-form-item>
			<el-form-item label="前端路由" prop="path">
				<el-input v-model="form.path" placeholder="例如: /userGroup/index"></el-input>
			</el-form-item>
			<el-form-item label="前端组件" prop="component">
				<el-input v-model="form.component" placeholder="例如: userGroup/index"></el-input>
			</el-form-item>
			<el-form-item label="菜单图标">
				<el-input v-model="form.icon" placeholder="例如: el-icon-user"></el-input>
			</el-form-item>
			<el-form-item label="是否菜单" prop="isMenu">
				<el-radio :label="1" v-model="form.is_menu">功能</el-radio>
				<el-radio :label="2" v-model="form.is_menu">菜单</el-radio>
			</el-form-item>
			<el-form-item label="菜单隐藏" prop="hidden">
				<el-radio label="1" v-model="form.hidden">隐藏</el-radio>
				<el-radio label="2" v-model="form.hidden">不隐藏</el-radio>
				<span style="color:#F56C6C;font-size: 12px;line-height: 14px">特殊情况下。如果你想跳转页面方式维护数据，这里可以把路由设置为菜单，并设置为隐藏。可参考系统商品添加</span>
			</el-form-item>
			<el-form-item label="排序">
				<el-input v-model="form.sort" type="number"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增菜单',
				edit: '编辑菜单',
				show: '查看'
			},
			visible: false,
			isSaveIng: false,
			form: {
				id: 0,
				pid: 0,
				type: 'system',
				name: "",
				path: "",
				auth: "",
				hidden: "1",
				component: "",
				icon: '',
				is_menu: 1,
				sort: 0
			},
			pName: "",
			rules: {
				name: [
					{required: true, message: '请输入菜单名', trigger: 'blur'}
				],
				type: [
					{required: true, message: '请输入菜单标识', trigger: 'blur'}
				]
			},
		}
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		// 表单提交方法
		submitForm(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					let res;
					if (this.mode == 'add') {
						res = await this.$API.menu.add.post(this.form)
					} else {
						res = await this.$API.menu.edit.post(this.form)
					}

					if (res.code == 0) {
						this.$message.success(res.msg)
						this.$emit('success')
					} else {
						this.$message.error(res.msg)
					}
				} else {
					return false;
				}
			})
		},
		// 表单注入数据
		setData(row) {
			this.form.id = row.id
			this.form.pid = row.pid
			this.form.type = row.type
			this.form.name = row.name
			this.form.path = row.path
			this.form.auth = row.auth
			this.form.component = row.component
			this.form.icon = row.icon
			this.form.is_menu = parseInt(row.is_menu)
			this.form.hidden = String(row.hidden)
			this.form.sort = row.sort
		},
		setAddData(row) {
			this.form.pid = row.pid;
			this.pName = row.name;
		}
	}
}
</script>

<style scoped>

</style>
